<template>
  <div id="userManagement">
    <el-row>
      <el-col :span="12">
        <div class="title">用户列表</div>
      </el-col>
      <el-col :span="12">
        <div v-if="userType != 0" style="text-align: right">
          <el-button @click="add">添加</el-button>
        </div>
      </el-col>
    </el-row>

    <div style="margin-top: 30px">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F6F7F8' }"
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <!-- <el-table-column prop="name" label="姓名"> </el-table-column> -->
        <el-table-column prop="username" label="用户名"></el-table-column>
        <!-- <el-table-column
          prop="phone"
          label="电话"
          width="100px"
        ></el-table-column>
        <el-table-column prop="position" label="职位"></el-table-column> -->
        <el-table-column prop="type" label="用户类型" width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.type == 0 ? "用户" : "超级管理员" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="loginDuration" label="登录时长"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.state == 0 ? "有效" : "无效" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-popconfirm v-if="userType != 0" title="确定删除吗?" @confirm="deleteRow(scope.row)">
              <el-button
                slot="reference"
                type="text"
                size="small"
                style="color: red"
                >删除</el-button
              >
            </el-popconfirm>
            <el-button
              v-if="userType != 0"
              slot="reference"
              type="text"
              size="small"
              style="margin-left: 10px"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="userType != 0"
              slot="reference"
              type="text"
              size="small"
              style="margin-left: 10px"
              @click="editPasswordOpen(scope.row)"
              >修改密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: right; margin-top: 15px">
      <el-pagination
        background
        layout="prev, pager, next"
        :currentPage="current"
        @current-change="current_change"
        :total="total"
      >
      </el-pagination>
    </div>
    <!--添加用户-->
    <el-dialog
      title="添加用户"
      :close-on-click-modal="false"
      :visible.sync="addUser"
      :before-close="closeDilog"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-row :gutter="25">
          <!-- <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="ruleForm.username"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="用户名" prop="phone">
              <el-input
                v-model="ruleForm.phone"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="ruleForm.password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="是否有效" prop="state">
              <el-select
                v-model="ruleForm.state"
                style="width: 100%"
                placeholder="请选择是否有效"
              >
                <el-option label="有效" value="0"></el-option>
                <el-option label="无效" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="12">
            <el-form-item label="职位" prop="position">
              <el-input
                v-model="ruleForm.position"
                placeholder="请输入职位"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="角色" prop="type">
              <el-select
                v-model="ruleForm.type"
                style="width: 100%"
                placeholder="请选择角色"
              >
                <el-option label="普通用户" value="0"></el-option>
                <el-option label="超级管理员" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时长" prop="loginDuration">
              <el-input
                v-model="ruleForm.loginDuration"
                placeholder="请输入时长"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!---修改用户-->
    <el-dialog
      title="修改用户"
      :close-on-click-modal="false"
      :visible.sync="editUser"
      :before-close="closeEditUser"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        ref="editForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-row :gutter="25">
          <!-- <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="editForm.name"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="editForm.username"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="用户名" prop="phone">
              <el-input
                v-model="editForm.phone"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="职位" prop="position">
              <el-input
                v-model="editForm.position"
                placeholder="请输入职位"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="角色" prop="type">
              <el-select
                v-model="editForm.type"
                style="width: 100%"
                placeholder="请选择角色"
              >
                <el-option label="普通用户" :value="0"></el-option>
                <el-option label="超级管理员" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时长" prop="loginDuration">
              <el-input
                v-model="editForm.loginDuration"
                placeholder="请输入时长"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editSubmitForm('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!--修改密码-->
    <el-dialog
      title="修改密码"
      :close-on-click-modal="false"
      :visible.sync="editPassword"
      :before-close="closeEditPassword"
    >
        <el-form
          :model="passwordForm"
          :rules="passwordRules"
          ref="passwordForm"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-form-item label="密码" prop="newPassword">
            <el-input
              v-model="passwordForm.newPassword"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="passwordForm.confirmPassword"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" sty class="dialog-footer">
          <el-button type="primary" @click="passwordSubmitForm('passwordForm')"
            >确 定</el-button
          >
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  usersPage,
  addUsers,
  usersDel,
  usersVailName,
  usersEdit,
  usersPWd
} from "../../api/index";
export default {
  data() {
    return {
      addUser: false,
      userType:JSON.parse(localStorage.getItem("user")).type,
      ruleForm: {
        name: "",
        username: "",
        phone: "",
        password: "",
        position: "",
        type: "",
        state: "",
        loginDuration:'',
      },
      editForm: {
        name: "",
        username: "",
        phone: "",
        position: "",
        type: "",
        loginDuration:'',
      },
      passwordForm: {
        id: null,
        newPassword:'',
        confirmPassword: '',
      },
      passwordRules: {
        newPassword: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirmPassword: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        position: [{ required: true, message: "请输入职位", trigger: "blur" }],
        type: [{ required: true, message: "请选择角色", trigger: "change" }],
        state: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      tableData: [],
      current: 1,
      total: 0,
      editUser: false,
      editPassword: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      usersPage({
        size: 10,
        current: this.current,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.records;
      });
    },
    //添加用户弹框
    add() {
      this.addUser = true;
    },
    editPasswordOpen(data) {
      this.passwordForm.id = data.id;
      this.editPassword = true;
    },
    closeEditPassword() {
      this.editPassword = false;
      this.$refs.passwordForm.resetFields();
    },
    closeDilog() {
      this.addUser = false;
      this.$refs.ruleForm.resetFields();
    },
    current_change(currentPage) {
      this.current = currentPage;
      this.getData();
    },
    //删除
    deleteRow(data) {
      usersDel(data.id).then((res) => {
        if (res.code == 0) {
          this.$message.success(res.msg);
          this.getData();
        }
      });
    },
    edit(data) {
      this.editForm = { ...data };
      this.editUser = true;
    },
    closeEditUser() {
      this.editUser = false;
      this.$refs.editForm.resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          usersVailName({
            phone: this.ruleForm.phone,
          }).then((res) => {
            if (res.code == 0) {
              this.ruleForm.state = 0;
              addUsers(this.ruleForm).then((res) => {
                if (res.code == 0) {
                  this.$message.success(res.msg);
                  this.getData();
                  this.closeDilog();
                }
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    editSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          usersVailName({
            id: this.editForm.id,
            phone: this.editForm.phone,
          }).then((res) => {
            console.log(res);
            if (res.code == 0) {
              delete this.editForm.createdTime;
              delete this.editForm.deptId;
              delete this.editForm.deptName;
              delete this.editForm.password;
              delete this.editForm.updatedTime;
              delete this.editForm.tenantId;
              delete this.editForm.roleList;
              usersEdit(this.editForm).then((res) => {
                if (res.code == 0) {
                  this.$message.success(res.msg);
                  this.getData();
                  this.closeEditUser();
                }
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    passwordSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          console.log(this.passwordForm)
          usersPWd(this.passwordForm).then(res => {
            console.log(res)
            if(res.code == 0) {
              this.$message.success(res.msg);
              this.closeEditPassword();
              this.getData();
            }
          })
        }
      })
    }
  },
};
</script>

<style scoped>
#userManagement {
  padding: 40px;
}
.title {
  color: #202224;
  border-left: 3px solid #4a76ff;
  padding-left: 9px;
  margin-bottom: 30px;
}
</style>